<template>
  <el-dialog
    :title="formData.id?'编辑客户':'添加客户'"
    :visible="isShow"
    width="40%"
    center
    @close="closeFn"
    @editFun="getClientByIds"
  >
    <!-- form表单 -->
    <el-form ref="form" label-width="80px" :model="formData" :rules="rules">
      <el-form-item label="经纪" prop="agent">
        <el-select v-model="formData.agent.name" placeholder="Select">
          <el-option
            v-for="item in broker"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            @click.native="getAgentId(item.id)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="Please enter your name" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" placeholder="Please enter email address" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="formData.phone" placeholder="Please enter telephone number" />
      </el-form-item>
      <el-form-item label="微信" prop="wechat">
        <el-input v-model="formData.wechat" placeholder="Please enter wecha" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input
          v-model="formData.desc"
          type="textarea"
          placeholder="Please enter a detailed description"
        />
      </el-form-item>
      <el-form-item label="头像" prop="image">
        <el-input
          v-model="formData.image"
          placeholder="Please enter the profile picture address"
        />
        <uploadImages ref="avatar" @upImg="img" />
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <el-row slot="footer" class="dialog-footer" type="flex" justify="end">
      <el-button size="small" @click="closeFn">取 消</el-button>
      <el-button type="primary" size="small" @click="submit">确 定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { getAgents, addClient, editClients, getClientById } from '@/api/client'
// import uploadImages from './components/uploadImages.vue'
import uploadImages from './uploadImages.vue'

export default {
  components: { uploadImages },
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      broker: [],
      //   agent: '',
      formData: {
        agent: {
          name: ''
        }, // 经纪
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '', // 描述
        image: ''
      },
      agId: '',
      //   校验规则
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { pattern: /^\d{5,12}@[qQ][qQ]\.(com|cn)$/, message: '邮箱不正确', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          // pattern 表单校验提供的属性 专门用于写正则表达式来校验数据
          { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
        ],
        wechat: [
          { required: true, message: '请输入微信', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ],
        image: [
          { required: true, message: '请上传头像', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getAgentsList()
  },
  methods: {
    // 获取经纪人列表
    async getAgentsList() {
      const res = await getAgents()
      this.broker = res.data
    // console.log(85, res.data)
    },
    // 关闭弹窗
    closeFn() {
      this.$emit('update:isShow', false)
      //   清空校验规则
      this.$refs.form.resetFields()
      //   清空表单数据
      this.formData = {
        agent: {}, // 经纪
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '', // 描述
        image: ''
      }
      const img1 = this.$refs.avatar.imgUrl
      if (img1) {
        this.$refs.avatar.imgUrl = ''
      }
    },
    // 点击编辑按钮触发事件
    async getClientByIds(id) {
      const res = await getClientById(id)
      console.log(id)
      // 利用ref属性 实现数据回显
      console.log(res)
      this.formData = res.data
      this.$refs.avatar.imgUrl = this.formData.image
    },
    getAgentId(id) {
      this.agId = id
    },
    // 点击新增按钮触发事件
    addClients() {
      // console.log(1)
      this.$refs.avatar.imgUrl = ''
      // console.log(this.formData)
      // console.log(this.$refs.avatar.imgUrl)
    },
    // 提交
    async submit() {
    // 整体的表单验证
      await this.$refs.form.validate()
      if (this.formData.id) {
        // 编辑
        this.formData.agent = this.agId
        const res = await editClients(this.formData)
        console.log(res)
      } else {
        // 新增
        this.formData.agent = this.agId
        this.formData.image = this.$refs.avatar.imgUrl
        await addClient(this.formData)
        this.$emit('next')
      }
      //   关闭弹窗
      this.closeFn()
      //   通知父组件 刷新页面
      this.$emit('updateList')
    },
    // 显示上传的图片
    img(img) {
      this.formData.image = img
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
